<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－画多边形</title>
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=95f0a5688ec713adb3dd1735533f6fcb"></script>
    <script>
    var zoom = 17;

    function onLoad() {
        // 添加地图
        var map = new T.Map('mapDiv');
        map.centerAndZoom(new T.LngLat(106.68243, 26.22207), zoom);
        map.disableDoubleClickZoom();

        // var tool = new T.PolylineTool(map, {
        var tool = new T.PolygonTool(map, {
            color: 'red',
            weight: 3,
            opacity: 0.7,
            fillColor: 'yellow',
            fillOpacity: 0.3,
            lineStyle: 'solid',
            showLabel: false,
        });
        tool.addEventListener('addpoint', (e) => {
            console.log("=======", e.currentLnglats);
        });
        tool.addEventListener('draw', (e) => {
            console.log("=======", e.currentLnglats);
        });

        // 添加按钮
        function onButtonClick() {
            tool.close();
            tool.open();
        }

        function createButton(control, label, click) {
            var button = document.createElement("a");
            control.appendChild(button);
            button.innerHTML = label;
            button.style.cssText = "border-radius:8px;font-size: 18px;border:solid 2px blue;background:#fff;padding:4px;cursor:pointer;";
            button.onclick = click;
            return button;
        }

        var buttonControl = new T.Control({position: T_ANCHOR_TOP_LEFT});
        var button;
        buttonControl.onAdd = function (map) {
            var container = document.createElement("div");
            button = createButton(container, '开始', onButtonClick);
            return container;
        };
        buttonControl.onRemove = function (map) {
            delete button;
        }
        map.addControl(buttonControl);
    }
    </script>
</head>
<body onLoad="onLoad()">
    <div id="mapDiv" style="position:absolute;width:100%; height:100%"></div>
</body>
</html>
